<template>
    <div >
        <div>
           <van-nav-bar
            title="动态"
            right-text= "发表动态"
            @click-right="onClickRight"
            />
        </div>
        <div id="list-div">
            <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <div class = "find" v-for="(item,index) in dynamicContent" :key="index">
                        <div class="find_userName">
                            {{item.user_name}}
                        </div>
                        <div class="find_text">
                            {{item.dynamic_content}}
                        </div>
                        <div class="find_bottom">
                            <div class="find_bottom_time">{{ $moment(item.createTime).format('YYYY/MM/DD HH:mm')}}</div>
                            <div @click="deleteDynamic(item.id)" class="find_bottom_Btn" v-if="item.user_id === userId">删除</div> 
                        </div>
                        
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    // import moment from "moment";  
    export default {
        data(){
            return{
                userId: null,
                dynamicContent:[],
                pageSize: 5,
                pageNum: 1,
                loading: false,   //上拉加载使用
                finished: false,  //上拉加载是否没有数据了
                isRefresh:false, //下拉刷新
            }
        },
        created(){
            if(localStorage.userInfo){
                let userInfo = JSON.parse(localStorage.userInfo)
                this.userId = userInfo.userId
                console.log(userInfo);
            }
        },
        mounted(){
            let winHeight = document.documentElement.clientHeight
            document.getElementById('list-div').style.height=winHeight-100 +'px'
            this.getDynamic()
        },
        methods: {
            getDynamic(){
                // this.openLoad = true;
                axios({
                    url: 'http://localhost:3000/dynamic/page',
                    method: 'post',
                    data:{
                        pageNum:this.pageNum,
                        userId: this.userId
                    }
                }).then(response =>{
                    console.log(response.data);
                    if(response.status == 200  ){
                        if(response.data.message){
                            this.pageNum++
                            console.log(this.pageNum);
                            this.dynamicContent=this.dynamicContent.concat(response.data.message)
                        }
                        if(!response.data.data){
                            this.finished = true;
                        }
                    } 
                    this.loading=false;
                    console.log(this.finished)
                })
                .catch(error=>{
                    console.log(error)
                })
            },
            //发表动态
            onClickRight(){
                if(this.userId){
                    this.$router.push({ path:'/dynamic' })
                }else{
                    Toast.fail('请先登录账号')
                }
            },
            //上拉加载函数
            onLoad(){
                setTimeout(()=>{
                    this.getDynamic()
                    // this.loading=false
                },1000)
            },
            //下拉刷新
            onRefresh(){
                setTimeout(() => {
                    this.isRefresh = false;
                    this.finished = false;
                    this.pageNum=1
                    this.dynamicContent=[];
                    this.getDynamic()
                }, 1000);
            },
            deleteDynamic(id){
                // console.log("============+++++========",id);
                axios({
                    url: 'http://localhost:3000/dynamic/deleteDynamic',
                    method: 'delete',
                    data:{
                        id,
                    }
                }).then(res =>{
                    location.reload()
                    this.getDynamic()
                    // console.log("------------=========",res);
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .find{
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #cecece;
    }
    .find_userName{
        text-align: left;
        margin-left: .8rem;
        margin-top: 1rem;
        font-size: 1rem;
        color: blue;
        font-weight:bold;     
    }
    .find_text{
        margin-left: .5rem;
        font-size: 1rem;
        text-align: left;
        margin: .5rem ;
    }
    .find_bottom{
        display: flex;
        justify-content: flex-end;
    }
    .find_bottom_Btn{
        float: right;
        color: blue;
        font-size: .8rem;
        width: 15%;
        // margin-: 5px;
        margin-bottom: 5px;
        padding-right: 0;
    }
    .find_bottom_time{
        margin-right: 20px;
    }
    // .find_time{
    //     text-align: right;
    //     margin-right: .5rem;
    // }
    
    .list-item{
        text-align: center;
        line-height: 80px;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
    }
    #list-div{
        overflow: scroll;
    }
</style>